import React, { Component, createRef } from 'react'
import { Form, Input, Button, TimePicker, Card, Spin } from 'antd';
import { editArticalRequest, getArticalRequest } from '../../request'
import moment from 'moment'
import E from 'wangeditor'
class Edit extends Component {
    constructor(props) {
        super(props)
        this.state = {
            spinState: true
        }

    }

    onFinish = (values) => {
        if(values) {
           const data = Object.assign({}, values, {createAt :values.createAt.valueOf()})
           this.setState({spinState: true})
           editArticalRequest(this.props.match.params.id ,data)
           .then(res=>{
               console.log(res)
           }).finally(()=>{
               this.setState({spinState:false})
           })
        }
    }
    editRef = createRef()
    formRef = createRef()

    initEdit = () => {
        this.editor = new E(this.editRef.current)
        this.editor.config.onchange = (html) => {
            this.formRef.current.setFieldsValue({content:html})
        }
        this.editor.create()

    } 

    componentDidMount() {
        this.initEdit()
        getArticalRequest(this.props.match.params.id)
        .then(res=>{
            res.createAt = moment(res.createAt)
            this.formRef.current.setFieldsValue(res)
            this.editor.txt.html(res.content)

        }).finally(()=>{
            this.setState({spinState: false})
        })
    }
    render() {
        return (
            <Card extra={<Button onClick={this.props.history.goBack}>返回</Button>}>
                <Spin spinning={this.state.spinState}>
                <Form
                    ref={this.formRef}
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    labelCol={{span:4}}
                    wrapperCol={{span: 12}}
                >
                   
                    <Form.Item
                        label='标题'
                        name="title"
                        rules={[{ required: true, message: 'Please input your title!' }]}
                    >
                        <Input placeholder="title" />
                    </Form.Item>
                    <Form.Item
                        label='作者'
                        name="author"
                        rules={[{ required: true, message: 'Please input author\'s name!' }]}
                    >
                        <Input placeholder="admin" />
                    </Form.Item>
                    <Form.Item
                        label='阅读量'
                        name="amount"
                        rules={[{ required: true, message: 'Please input the number of reading!' }]}
                    >
                        <Input placeholder="0" />
                    </Form.Item>
                    <Form.Item
                        label='创建时间'
                        name="createAt"
                        rules={[{ required: true, message: 'Please input the createAt!' }]}
                    >
                        <TimePicker format="YYYY:MM:DD HH:mm:ss" />
                    </Form.Item>

                    <Form.Item
                        label='内容'
                        name="content"
                        rules={[{ required: true, message: 'Please input the content!' }]}
                    >
                        <div style={{zIndex: 0, position: 'relative'}} ref={this.editRef} />
                    </Form.Item>
                    
                    <Form.Item wrapperCol={{offset:4}}>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                        确定提交
                        </Button>
                       
                    </Form.Item>

                </Form>
                
                </Spin>
              
            </Card>
            )
        }
}



// const NormalLoginForm = () => {
//   const onFinish = values => {
//     console.log('Received values of form: ', values);
//   };


export default Edit